<template>
  <div>
    <!-- 待处理加班申请表格 -->
    <el-card class="box-card" style="min-height: 350px">
      <div slot="header" class="clearfix">
        <span>待处理加班申请</span>
      </div>

      <!-- el-table 显示数据 -->
      <el-table
          :data="overTimeTableData"
          border
          style="width: 100%; "
          v-loading="overTimeLoading"
      >
        <el-table-column
            prop="startTime"
            label="加班开始时间"
            width="168"
        ></el-table-column>
        <el-table-column
            prop="endTime"
            label="加班结束时间"
            width="168"
        ></el-table-column>
        <el-table-column
            prop="employeeName"
            label="申请人"
            width="100"
        ></el-table-column>
        <el-table-column
            prop="type"
            label="加班类型"
            width="120"
        >
          <template slot-scope="scope">
            {{ getTypeText(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column
            prop="reason"
            label="申请理由"
            width="200"
        ></el-table-column>
        <el-table-column prop="state" label="当前状态" width="120">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.state === 2 ? 'success' : 'warning'"
                size="small"
            >
              {{ scope.row.state === 2 ? '已处理' : '未处理' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="remarks"
            label="反馈信息"
            width="150"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="small"
                @click="handleProcess(scope.row, 'overTime')"
                :disabled="scope.row.state === 2"
            >
              处理
            </el-button>
            <el-button
                type="success"
                size="small"
                @click="handleApprove(scope.row, 'overTime')"
                :disabled="scope.row.state === 2"
            >
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          @size-change="handleOverTimeSizeChange"
          @current-change="handleOverTimeCurrentChange"
          :current-page="overTimePagination.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="overTimePagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="overTimePagination.total"
          style="margin-top: 20px; text-align: right"
      >
      </el-pagination>
    </el-card>

    <!-- 待处理调休申请表格 -->
    <el-card class="box-card" style="min-height: 350px">
      <div slot="header" class="clearfix">
        <span>待处理调休申请</span>
      </div>

      <!-- el-table 显示数据 -->
      <el-table
          :data="compOffTableData"
          border
          style="width: 100%; "
          v-loading="compOffLoading"
      >
        <!-- 这里需要根据调休申请的实际字段进行调整 -->
        <el-table-column
            prop="startTime"
            label="调休开始时间"
            width="168"
        ></el-table-column>
        <el-table-column
            prop="endTime"
            label="调休结束时间"
            width="168"
        ></el-table-column>
        <el-table-column
            prop="employeeName"
            label="申请人"
            width="100"
        ></el-table-column>
        <el-table-column
            prop="reason"
            label="申请理由"
            width="200"
        ></el-table-column>
        <el-table-column prop="state" label="当前状态" width="120">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.state === 2 ? 'success' : 'warning'"
                size="small"
            >
              {{ scope.row.state === 2 ? '已处理' : '未处理' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="remarks"
            label="反馈信息"
            width="150"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="small"
                @click="handleProcess(scope.row, 'compOff')"
                :disabled="scope.row.state === 2"
            >
              处理
            </el-button>
            <el-button
                type="success"
                size="small"
                @click="handleApprove(scope.row, 'compOff')"
                :disabled="scope.row.state === 2"
            >
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          @size-change="handleCompOffSizeChange"
          @current-change="handleCompOffCurrentChange"
          :current-page="compOffPagination.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="compOffPagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="compOffPagination.total"
          style="margin-top: 20px; text-align: right"
      >
      </el-pagination>
    </el-card>

    <!-- 处理弹窗 -->
    <el-dialog
        title="处理申请"
        :visible.sync="dialogVisible"
        width="40%"
        @close="handleDialogClose"
    >
      <el-form
          ref="formRef"
          :model="formData"
          label-width="120px"
      >
        <el-form-item label="开始时间">
          <el-input
              v-model="formData.startTime"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input
              v-model="formData.endTime"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input
              v-model="formData.employeeName"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="申请理由">
          <el-input
              v-model="formData.reason"
              type="textarea"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input
              v-model="formData.approverName"
              placeholder="请输入审批人ID"
              :value="currentUserId"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批状态" prop="state">
          <el-select v-model="formData.state" placeholder="请选择审批状态">
            <el-option label="审批中" :value="1"></el-option>
            <el-option label="同意" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="反馈信息" prop="remarks">
          <el-input
              v-model="formData.remarks"
              type="textarea"
              placeholder="请输入反馈信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOverTimeList, saveOverTimeApply, updateOverTimeApply,
  // 这里需要引入调休申请的 API

} from '@/api/overtimeApi';

import{
  getCompOffList, saveCompOffApply, updateCompOffApply,
} from '@/api/compoffApi'

export default {
  data() {
    return {
      currentUserId: null,
      overTimeTableData: [],
      overTimeLoading: false,
      overTimePagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      compOffTableData: [],
      compOffLoading: false,
      compOffPagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      formData: {
        id: null,
        startTime: null,
        endTime: null,
        reason: "",
        approveId: null,
        employeeId: null,
        approverName: null,
        employeeName: null,
        state: 1,
        type: null,
        remarks: ""
      },
      currentApplyType: null
    };
  },
  created() {
    this.currentUserId = window.sessionStorage.getItem("empId");
    this.fetchOverTimeData();
    this.fetchCompOffData();
  },
  methods: {
    getTypeText(type) {
      switch (type) {
        case 1:
          return "工作日加班";
        case 2:
          return "普通休假日加班";
        case 3:
          return "节假日加班";
        default:
          return "未知类型";
      }
    },
    async fetchOverTimeData() {
      this.overTimeLoading = true;
      const params = {
        state: 1, // 只获取未处理的申请
        approveId: this.currentUserId,
        pageNum: this.overTimePagination.pageNum,
        pageSize: this.overTimePagination.pageSize,
      };

      try {
        const result = await getOverTimeList(params);
        if (result.code === 200) {
          this.overTimeTableData = result.data.list;
          this.overTimePagination.total = result.data.total;
          this.overTimePagination.pageNum = result.data.pageNum;
          this.overTimePagination.pageSize = result.data.pageSize;
        }
      } catch (error) {
        console.error("请求失败:", error);
      } finally {
        this.overTimeLoading = false;
      }
    },
    async fetchCompOffData() {
      this.compOffLoading = true;
      const params = {
        state: 1, // 只获取未处理的申请
        approveId: this.currentUserId,
        pageNum: this.compOffPagination.pageNum,
        pageSize: this.compOffPagination.pageSize,
      };

      try {
        const result = await getCompOffList(params);
        if (result.code === 200) {
          this.compOffTableData = result.data.list;
          this.compOffPagination.total = result.data.total;
          this.compOffPagination.pageNum = result.data.pageNum;
          this.compOffPagination.pageSize = result.data.pageSize;
        }
      } catch (error) {
        console.error("请求失败:", error);
      } finally {
        this.compOffLoading = false;
      }
    },
    handleOverTimeSizeChange(newSize) {
      this.overTimePagination.pageSize = newSize;
      this.fetchOverTimeData();
    },
    handleOverTimeCurrentChange(newPage) {
      this.overTimePagination.pageNum = newPage;
      this.fetchOverTimeData();
    },
    handleCompOffSizeChange(newSize) {
      this.compOffPagination.pageSize = newSize;
      this.fetchCompOffData();
    },
    handleCompOffCurrentChange(newPage) {
      this.compOffPagination.pageNum = newPage;
      this.fetchCompOffData();
    },
    handleProcess(row, applyType) {
      this.formData = {...row};
      this.currentApplyType = applyType;
      this.dialogVisible = true;
    },
    async handleApprove(row, applyType) {
      try {
        await this.$confirm("确定要审批通过该申请吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        const params = {
          id: row.id,
          state: 2,
        };

        let result;
        if (applyType === 'overTime') {
          result = await updateOverTimeApply(params);
        } else if (applyType === 'compOff') {
          result = await updateCompOffApply(params);
        }

        if (result.code === 200) {
          this.$message.success("审批成功");
          if (applyType === 'overTime') {
            this.fetchOverTimeData();
          } else if (applyType === 'compOff') {
            this.fetchCompOffData();
          }
        } else {
          this.$message.error("审批失败：" + result.message);
        }
      } catch (error) {
        if (error === 'cancel') {
          this.$message.info("已取消审批");
        } else {
          console.error("审批失败:", error);
          this.$message.error("审批请求失败");
        }
      }
    },
    handleDialogClose() {
      this.dialogVisible = false;
      this.$refs.formRef.resetFields();
    },
    async handleSubmit() {
      try {
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            let result;
            if (this.currentApplyType === 'overTime') {
              result = await saveOverTimeApply(this.formData);
            } else if (this.currentApplyType === 'compOff') {
              result = await saveCompOffApply(this.formData);
            }

            if (result.code === 200) {
              this.$message.success("处理成功");
              if (this.currentApplyType === 'overTime') {
                this.fetchOverTimeData();
              } else if (this.currentApplyType === 'compOff') {
                this.fetchCompOffData();
              }
              this.handleDialogClose();
            } else {
              this.$message.error("处理失败：" + result.message);
            }
          }
        });
      } catch (error) {
        console.error("处理失败:", error);
        this.$message.error("处理请求失败");
      }
    }
  },
};
</script>

<style scoped>
.box-card {
  margin: 20px;
}

.clearfix {
  font-size: 16px;
  font-weight: bold;
}
</style>